<script setup>
import { inject, ref, onMounted, onBeforeUnmount } from 'vue'
import { ElMessage } from 'element-plus'
import Card from '@/views/new-screen/components/card.vue'
import DrawEcharts from '@/components/draw-echarts.vue'
import * as echarts from 'echarts'
import SvgIcon from '@/components/svg-icon/index.vue'
import mitter from '@/utils/eventBus'
import yycg from '../../../../assets/imgs/bt_yycg_nor.png'
import sjfws from '../../../../assets/imgs/bt_sjfws_nor.png'
import fkzrs from '../../../../assets/imgs/bt_fkzrs_nor.png'
import sxry from '../../../../assets/imgs/img_sxry.png'
import noAva from '@/assets/imgs/img_tx_kzt.png'
import { getHelper } from '@/utils/map/index.js'

let measure, _viewer, _layerManager

const mapId = inject('mapId')

defineProps({
  isExpanded: Boolean,
})

const trendOptions = {
  backgroundColor: 'transparent',
  //你的代码
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(13, 64, 71, 0.50)',
    borderColor: 'rgba(143, 225, 252, 0.60)',
    padding: 8,
    textStyle: {
      color: '#fff',
    },
  },
  legend: {
    data: ['预约数', '入园人数', '入园车辆'],
    icon: 'rect',
    right: '3%',
    top: '5%',
    itemWidth: 12,
    itemHeight: 12,
    textStyle: {
      fontSize: 14,
      color: '#FFFFFF',
    },
  },
  grid: {
    left: '12%',
    right: '3%',
    bottom: '30',
    top: '17.5%',
  },
  xAxis: [
    {
      type: 'category',
      data: [
        '2.1',
        '2.2',
        '2.3',
        '2.4',
        '2.5',
        '2.6',
        '2.7',
        '2.8',
        '2.9',
        '2.10',
      ],
      boundaryGap: false,
      axisPointer: {
        type: 'shadow',
      },
      axisLabel: {
        color: '#F5F5F5', //更改坐标轴文字颜色
        fontSize: 12, //更改坐标轴文字大小
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
      axisLabel: {
        color: '#F5F5F5', //更改坐标轴文字颜色
        fontSize: 12, //更改坐标轴文字大小
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(30, 48, 63, 1)',
          type: 'dashed',
        },
      },
    },

    // 折线部分
    {
      type: 'value',
      name: '',
      axisLabel: {
        show: false,
        color: '#F5F5F5', //更改坐标轴文字颜色
        fontSize: 12, //更改坐标轴文字大小
        formatter: '{value} %',
      },
      splitLine: {
        show: false,
      },
    },
  ],
  series: [
    {
      name: '预约数',
      type: 'line',
      showSymbol: false,
      itemStyle: {
        shadowColor: '#fff',
        shadowBlur: 5,
        color: '#50FEA3',
      },
      lineStyle: {
        width: 1,
        color: '#50FEA3',
      },
      areaStyle: {
        width: 4,
        // opacity: 0.1,
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(80,254,163, 1)' },
            { offset: 1, color: 'rgba(80,254,163, 0.1)' },
          ],
          global: false,
        },
      },
      // 实现数字展示在柱状图
      label: {
        show: false,
        position: 'top',
        fontSize: 12,
        color: '#F5F5F5',
        offset: [0, -10],
        formatter: '{c}', //添加单位
      },
      data: [180, 170, 110, 370, 37, 260, 420, 170, 110, 370],
    },
    {
      name: '入园人数',
      type: 'line',
      showSymbol: false,
      itemStyle: {
        shadowColor: '#fff',
        shadowBlur: 5,
        color: '#FF6059',
      },
      lineStyle: {
        width: 1,
        color: '#FF6059',
      },
      areaStyle: {
        width: 4,
        // opacity: 0.1,
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(255,96,89, 1)' },
            { offset: 1, color: 'rgba(255,96,89, 0.1)' },
          ],
          global: false,
        },
      },
      label: {
        show: false,
        position: 'top',
        fontSize: 12,
        color: '#F5F5F5',
        offset: [0, -10],
        formatter: '{c}', //添加单位
      },
      data: [490, 380, 200, 480, 480, 310, 370, 200, 480, 480],
    },

    // 折线部分
    {
      name: '入园车辆',
      type: 'line',
      // smooth: true,
      yAxisIndex: 1,
      // symbol: 'circle',
      // symbolSize: 10,
      showSymbol: false,
      itemStyle: {
        shadowColor: '#fff',
        shadowBlur: 5,
        color: '#FAB54F',
      },
      lineStyle: {
        width: 1,
        color: '#FAB54F',
      },
      areaStyle: {
        width: 4,
        // opacity: 0.1,
        // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //   {
        //     offset: 0,
        //     color: 'rgba(0, 0, 0, 0.6)'
        //   },
        //   {
        //     offset: 1,
        //     color: 'rgba(250,181,79,0.8)'
        //   }
        // ])
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 1, color: 'rgba(0,0,0, 1)' },
            { offset: 0, color: 'rgba(250,181,79, 1)' },
          ],
          global: false,
        },
      },
      label: {
        show: false,
        position: 'top',
        color: '#F5F5F5',
        formatter: '{c} %',
      },
      data: [29, 38, 52, 75, 98, 110, 120, 75, 98, 110],
    },
  ],
}

let showVisitor = ref(false)

let showRetention = ref(false)

let showVisitorDetail = ref(false)

let showTrajectory = ref(false)

const visitorNumList = ref([
  {
    img: yycg,
    name: '预约成功数',
    value: 9,
  },
  {
    img: sjfws,
    name: '实际访问数',
    value: 9,
  },
  {
    img: fkzrs,
    name: '访客总人数',
    value: 9,
  },
])

let visitorTable = ref([
  {
    name: '张三',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    reservationTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    reservationTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    reservationTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    reservationTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    reservationTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    reservationTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    reservationTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    reservationTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    reservationTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    reservationTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    reservationTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    reservationTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    reservationTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    reservationTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    reservationTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    reservationTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    reservationTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    reservationTime: '09-19 10:12:12',
  },
])

let retentionVisitorTable = ref([
  {
    name: '张三',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
  },

  {
    name: '张三',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
  },
])

let retentionCarTable = ref([
  {
    carNo: '渝A·88888',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
  },
  {
    carNo: '渝A·88888',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
  },
  {
    carNo: '渝A·88888',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
  },
  {
    carNo: '渝A·88888',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
  },
  {
    carNo: '渝A·88888',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
  },
  {
    carNo: '渝A·88888',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
  },
  {
    carNo: '渝A·88888',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
  },
  {
    carNo: '渝A·88888',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
  },
  {
    carNo: '渝A·88888',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
  },
  {
    carNo: '渝A·88888',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
  },
  {
    carNo: '渝A·88888',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
  },
  {
    carNo: '渝A·88888',
    phone: '183****1234',
    phoneFull: '183 6545 1234',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
  },
])

let peopleList = ref([
  {
    name: '张三',
    img: sxry,
  },
  {
    name: '王某某',
    img: sxry,
  },
  {
    name: '李某某',
    img: '',
  },
  {
    name: '徐某某',
    img: sxry,
  },
  {
    name: '叶某某',
    img: sxry,
  },
  {
    name: '朱某某',
    img: sxry,
  },
])

let trajectoryList = ref([
  {
    address: '蔡家园区大门',
    time: '2024-01-22  12:22:23',
    isWarn: false,
    position: [106.50267889877305, 29.793468517068004],
  },
  {
    address: '蔡家园区大门左侧',
    time: '2024-01-22  12:22:23',
    isWarn: false,
    position: [106.50367889877315, 29.794468517068104],
  },
  {
    address: 'XX园区园区1号楼',
    time: '2024-01-22  12:22:23',
    isWarn: true,
    position: [106.50467889877325, 29.795468517068114],
  },
  {
    address: 'XX园区园区1号楼左侧',
    time: '2024-01-22  12:22:23',
    isWarn: false,
    position: [106.50567889877335, 29.796468517068124],
  },
  {
    address: 'XX园区园区1号楼左侧',
    time: '2024-01-22  12:22:23',
    isWarn: false,
    position: [106.50667889877345, 29.797468517068134],
  },
  {
    address: 'XX园区园区2号楼左侧',
    time: '2024-01-22  12:22:23',
    isWarn: false,
    position: [106.50767889877355, 29.798468517068144],
  },
  {
    address: 'XX园区园区2号楼左侧',
    time: '2024-01-22  12:22:23',
    isWarn: false,
    position: [106.50867889877365, 29.799468517068154],
  },
])

let trajectoryActive = ref(null)

const scrollbarRef = ref()
const innerRef = ref()
let scrollWidth = ref(0)

const scrollLeft = () => {
  let num = scrollWidth.value % 110
  if (scrollWidth.value > 0) {
    scrollWidth.value -= num || 110
    scrollbarRef.value.setScrollLeft(scrollWidth.value)
  } else {
    ElMessage.warning('已经到头了')
    return
  }
}
const scrollRight = () => {
  let max = peopleList.value.length * 110 - 330
  let num = scrollWidth.value % 110
  if (scrollWidth.value < max) {
    scrollWidth.value += 110 - num
    scrollbarRef.value.setScrollLeft(scrollWidth.value)
    console.log(scrollWidth.value)
  } else {
    ElMessage.warning('已经到头了')
    return
  }
}
const scroll = ({ scrollLeft }) => {
  console.log(scrollLeft)
  scrollWidth.value = scrollLeft
}

const trajectoryMap = () => {
  trajectoryActive.value = null
  removeEntity()
  showTrajectory.value = true
  addLine()
  addPoint()
}

const entities = ref([])
const lineEntity = ref('')

const addLine = () => {
  let positions = []
  trajectoryList.value.map((item) => {
    positions.push(Number(item.position[0]))
    positions.push(Number(item.position[1]))
  })

  /// 创建线
  lineEntity.value = _viewer.entities.add({
    name: 'line',
    id: 'line',
    polyline: {
      positions: new Cesium.Cartesian3.fromDegreesArray(positions),
      width: 2,
      material: new Cesium.PolylineDashMaterialProperty({
        color: new Cesium.Color.fromCssColorString('#51BEFF'),
        dashLength: 10, //短划线长度
      }),
      clampToGround: true,
    },
    classificationType: Cesium.ClassificationType.S3M_TILE,
  })
  console.log(lineEntity.value)
}

const addPoint = () => {
  // const entities = []
  trajectoryList.value.forEach((item, index) => {
    if (index == trajectoryActive.value) {
      const entity = _viewer.entities.add({
        id: index,
        // name: '单体化标识面' + index,
        properties: new Cesium.PropertyBag(item),
        position: new Cesium.Cartesian3.fromDegrees(...item.position),
        billboard: {
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          image: 'img/dwd_rw_sel.png',
          scale: 0.5,
          pixelOffset: new Cesium.Cartesian2(0, -20),
        },
        ellipse: {
          // 设置短半轴
          semiMinorAxis: 30.0,
          // 设置长半轴
          semiMajorAxis: 30.0,
          material: new Cesium.Color.fromCssColorString('#FFC152'),
          // height: 300.0,
          outline: false,
          outlineColor: Cesium.Color.WHITE,
          // 高度
          extrudedHeight: 0.0,
          // 设置椭圆旋转
          rotation: Math.PI / 4,
          // rotation: Cesium.Math.toRadians(45),
        },
        label: {
          text: (index + 1).toString(),
          font: 'Bold 40px MicroSoft YaHei',
          showBackground: false,
          scale: 0.5,
          fillColor: new Cesium.Color.fromCssColorString('#fff'), //设置文字填充的颜色
          outlineColor: new Cesium.Color.fromCssColorString('#fff'), //设置外框颜色
          outlineWidth: 0, //设置外框大小
          style: Cesium.LabelStyle.FILL_AND_OUTLINE, //填充方式，内外都填充
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          // pixelOffset: new Cesium.Cartesian2(0, 12)
        },
      })
      entities.value.push(entity)
    } else {
      const entity = _viewer.entities.add({
        id: index,
        // name: '单体化标识面' + index,
        properties: new Cesium.PropertyBag(item),
        position: new Cesium.Cartesian3.fromDegrees(...item.position),
        billboard: {
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          image: 'img/dwd_rw_nor.png',
          scale: 0.5,
          pixelOffset: new Cesium.Cartesian2(0, -20),
        },
        ellipse: {
          // 设置短半轴
          semiMinorAxis: 30.0,
          // 设置长半轴
          semiMajorAxis: 30.0,
          material: new Cesium.Color.fromCssColorString('#0B2446'),
          // height: 300.0,
          outline: false,
          outlineColor: Cesium.Color.WHITE,
          // 高度
          extrudedHeight: 0.0,
          // 设置椭圆旋转
          rotation: Math.PI / 4,
          // rotation: Cesium.Math.toRadians(45),
        },
        label: {
          text: (index + 1).toString(),
          font: 'Bold 40px MicroSoft YaHei',
          showBackground: false,
          scale: 0.5,
          fillColor: new Cesium.Color.fromCssColorString('#fff'), //设置文字填充的颜色
          outlineColor: new Cesium.Color.fromCssColorString('#fff'), //设置外框颜色
          outlineWidth: 0, //设置外框大小
          style: Cesium.LabelStyle.FILL_AND_OUTLINE, //填充方式，内外都填充
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          // pixelOffset: new Cesium.Cartesian2(0, 12)
        },
      })
      entities.value.push(entity)
    }
  })
  console.log(entities.value)
}

const trajectoryClose = () => {
  showTrajectory.value = false
  trajectoryActive.value = null
  removeEntity()
}

const removeEntity = () => {
  if (lineEntity.value) {
    _viewer.entities.remove(lineEntity.value)
  }
  if (entities.value.length) {
    entities.value.forEach((item) => {
      _viewer.entities.remove(item)
    })
  }
  entities.value = []
  lineEntity.value = ''
}

const trajectoryClick = (index) => {
  trajectoryActive.value = index
  if (entities.value.length) {
    entities.value.forEach((item) => {
      _viewer.entities.remove(item)
    })
  }
  entities.value = []
  addPoint()
}

onMounted(async () => {
  const { map, layerManager } = await getHelper(mapId)
  _viewer = map
  measure = new Cesium.Measure(map)
  _layerManager = layerManager
  mitter.on('trajectory', (val) => {
    trajectoryMap()
  })
})
onBeforeUnmount(() => {
  showTrajectory.value = false
  mitter.off('trajectory')
  removeEntity()
})
</script>

<template>
  <div :class="['right', isExpanded ? 'active' : '']">
    <div v-show="!showTrajectory">
      <card
        name="临时访客统计"
        class="temporary-visitor"
        v-show="!showVisitor && !showRetention && !showVisitorDetail"
      >
        <template #title>
          <i class="title-icon"></i>
        </template>
        <div class="visitors">
          <div
            class="visitor"
            v-for="(item, index) in visitorNumList"
            :key="index"
            :style="{ backgroundImage: `url(${item.img})` }"
            @click="showVisitor = true"
          >
            <div class="visitor-info">
              <div class="visitor-info-name">{{ item.name }}</div>
              <div class="visitor-info-value">
                <span>{{ item.value }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="area-title">
          <div class="area-title-left" style="justify-content: flex-start">
            <div class="area-title-left-names">
              <div class="area-title-left-name">出入人员</div>
            </div>
          </div>
        </div>
        <div class="in-out">
          <div class="in-out-top humen">
            <div class="in-out-top-left">
              <div class="in-out-top-left-name">入园人员</div>
              <div class="in-out-top-left-count">23</div>
            </div>
            <div class="in-out-top-right">
              <div class="in-out-top-right-name">出园人员</div>
              <div class="in-out-top-right-count">23</div>
            </div>
          </div>
          <div class="in-out-bottom" @click="showRetention = true">
            <div class="in-out-bottom-info">
              <div class="in-out-bottom-info-left">
                <img src="../../../../assets/imgs/yczlry.png" />
                <span>（18:00以后）</span>
              </div>
              <div class="in-out-bottom-info-right">
                <div class="in-out-bottom-info-right-num">1</div>
                <div class="in-out-bottom-info-right-num">2</div>
                <div class="in-out-bottom-info-right-num">3</div>
                <span>人</span>
              </div>
            </div>
          </div>
        </div>
        <div class="area-title">
          <div class="area-title-left" style="justify-content: flex-start">
            <div class="area-title-left-names">
              <div class="area-title-left-name">出入车辆</div>
            </div>
          </div>
        </div>
        <div class="in-out" style="margin-bottom: 20px">
          <div class="in-out-top car">
            <div class="in-out-top-left">
              <div class="in-out-top-left-name">入园车辆</div>
              <div class="in-out-top-left-count">23</div>
            </div>
            <div class="in-out-top-right">
              <div class="in-out-top-right-name">出园车辆</div>
              <div class="in-out-top-right-count">23</div>
            </div>
          </div>
          <div class="in-out-bottom" @click="showRetention = true">
            <div class="in-out-bottom-info">
              <div class="in-out-bottom-info-left">
                <img src="../../../../assets/imgs/yczlcl.png" />
                <span>（18:00以后）</span>
              </div>
              <div class="in-out-bottom-info-right">
                <div class="in-out-bottom-info-right-num">1</div>
                <div class="in-out-bottom-info-right-num">2</div>
                <div class="in-out-bottom-info-right-num">3</div>
                <span>辆</span>
              </div>
            </div>
          </div>
        </div>
      </card>
      <card
        name="预约访客记录"
        class="reservation-visitor"
        v-show="showVisitor"
      >
        <template #title>
          <i class="title-icon"></i>
        </template>

        <template #right>
          <div class="right-close" @click="showVisitor = false">
            <img src="../../../../assets/imgs/ic_gb.png" />
          </div>
        </template>
        <div class="reservation-visitor-table">
          <el-table
            class="visitor-table-table"
            :data="visitorTable"
            height="100%"
          >
            <el-table-column prop="name" label="访客姓名" align="center">
              <template #default="scope">
                <el-popover
                  placement="bottom"
                  trigger="hover"
                  :show-arrow="false"
                  popper-class="visitor-infos"
                >
                  <template #reference>
                    <span
                      style="color: #fab54f"
                      class="m-2"
                      @click="
                        () => {
                          showVisitor = false
                          showVisitorDetail = true
                        }
                      "
                      >{{ scope.row.name }}</span
                    >
                  </template>
                  <div class="visitor-info">
                    <div class="visitor-info-left">
                      <img src="../../../../assets/imgs/img_tx.png" />
                    </div>
                    <div class="visitor-info-right">
                      <div class="visitor-info-right-line">
                        <div class="visitor-info-right-line-name name">
                          张子义
                        </div>
                      </div>
                      <div class="visitor-info-right-line">
                        <div class="visitor-info-right-line-name">
                          联系方式：
                        </div>
                        <div class="visitor-info-right-line-value">
                          183 2654 1234
                        </div>
                      </div>
                      <div class="visitor-info-right-line">
                        <div class="visitor-info-right-line-name">
                          身份证号：
                        </div>
                        <div class="visitor-info-right-line-value">
                          500111199810154567
                        </div>
                      </div>
                      <div class="visitor-info-right-line">
                        <div class="visitor-info-right-line-name">
                          车牌号码：
                        </div>
                        <div class="visitor-info-right-line-value">
                          渝A·88888
                        </div>
                      </div>
                      <div class="visitor-info-right-line">
                        <div class="visitor-info-right-line-name">
                          访客单位：
                        </div>
                        <div class="visitor-info-right-line-value">
                          XXXXXX公司
                        </div>
                      </div>
                    </div>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              prop="phone"
              label="联系方式"
              align="center"
              width="120"
            >
              <template #default="scope">
                <el-popover
                  popper-class="phone-infos"
                  placement="bottom"
                  trigger="hover"
                  :show-arrow="false"
                >
                  <template #reference>
                    <span class="m-2">{{ scope.row.phone }}</span>
                  </template>
                  <template #default>
                    <div class="phone-info">
                      {{ scope.row.phoneFull }}
                    </div>
                  </template>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              prop="dept"
              label="访问单位"
              align="center"
              width="80"
              show-overflow-tooltip
            />
            <el-table-column
              prop="reservationTime"
              label="预约时间"
              align="center"
              width="120"
              show-overflow-tooltip
            >
            </el-table-column>
          </el-table>
        </div>
      </card>
      <card name="滞留人员" class="retention-visitor" v-show="showRetention">
        <template #title>
          <i class="title-icon"></i>
        </template>

        <template #right>
          <div class="right-close" @click="showRetention = false">
            <img src="../../../../assets/imgs/ic_gb.png" />
          </div>
        </template>
        <div class="area-title">
          <div class="area-title-left" style="justify-content: flex-start">
            <div class="area-title-left-names">
              <div class="area-title-left-name">滞留人员</div>
            </div>
          </div>
        </div>
        <div class="retention-visitor-table">
          <el-table
            class="visitor-table-table"
            :data="retentionVisitorTable"
            height="100%"
          >
            <el-table-column prop="name" label="访客姓名" align="center">
              <template #default="scope">
                <el-popover
                  placement="bottom"
                  trigger="hover"
                  :show-arrow="false"
                  popper-class="visitor-infos"
                >
                  <template #reference>
                    <span style="color: #fab54f" class="m-2">{{
                      scope.row.name
                    }}</span>
                  </template>
                  <div class="visitor-info">
                    <div class="visitor-info-left">
                      <img src="../../../../assets/imgs/img_tx.png" />
                    </div>
                    <div class="visitor-info-right">
                      <div class="visitor-info-right-line">
                        <div class="visitor-info-right-line-name name">
                          张子义
                        </div>
                      </div>
                      <div class="visitor-info-right-line">
                        <div class="visitor-info-right-line-name">
                          联系方式：
                        </div>
                        <div class="visitor-info-right-line-value">
                          183 2654 1234
                        </div>
                      </div>
                      <div class="visitor-info-right-line">
                        <div class="visitor-info-right-line-name">
                          身份证号：
                        </div>
                        <div class="visitor-info-right-line-value">
                          500111199810154567
                        </div>
                      </div>
                      <div class="visitor-info-right-line">
                        <div class="visitor-info-right-line-name">
                          车牌号码：
                        </div>
                        <div class="visitor-info-right-line-value">
                          渝A·88888
                        </div>
                      </div>
                      <div class="visitor-info-right-line">
                        <div class="visitor-info-right-line-name">
                          访客单位：
                        </div>
                        <div class="visitor-info-right-line-value">
                          XXXXXX公司
                        </div>
                      </div>
                    </div>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              prop="phone"
              label="联系方式"
              align="center"
              width="120"
              show-overflow-tooltip
            >
              <template #default="scope">
                <el-popover
                  popper-class="phone-infos"
                  placement="bottom"
                  trigger="hover"
                  :show-arrow="false"
                >
                  <template #reference>
                    <span class="m-2">{{ scope.row.phone }}</span>
                  </template>
                  <template #default>
                    <div class="phone-info">
                      {{ scope.row.phoneFull }}
                    </div>
                  </template>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              prop="dept"
              label="访问单位"
              align="center"
              width="80"
              show-overflow-tooltip
            />
            <el-table-column
              prop="inTime"
              label="入园时间"
              align="center"
              width="120"
              show-overflow-tooltip
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="area-title">
          <div class="area-title-left" style="justify-content: flex-start">
            <div class="area-title-left-names">
              <div class="area-title-left-name">滞留车辆</div>
            </div>
          </div>
        </div>
        <div class="retention-visitor-table">
          <el-table
            class="visitor-table-table"
            :data="retentionCarTable"
            height="100%"
          >
            <el-table-column prop="carNo" label="车牌号" align="center">
              <template #default="scope">
                <el-popover
                  placement="bottom"
                  trigger="hover"
                  :show-arrow="false"
                  popper-class="visitor-infos"
                >
                  <template #reference>
                    <span style="color: #fab54f" class="m-2">{{
                      scope.row.carNo
                    }}</span>
                  </template>
                  <div class="visitor-info">
                    <div class="visitor-info-left">
                      <img src="../../../../assets/imgs/img_tx.png" />
                    </div>
                    <div class="visitor-info-right">
                      <div class="visitor-info-right-line">
                        <div class="visitor-info-right-line-name name">
                          张子义
                        </div>
                      </div>
                      <div class="visitor-info-right-line">
                        <div class="visitor-info-right-line-name">
                          联系方式：
                        </div>
                        <div class="visitor-info-right-line-value">
                          183 2654 1234
                        </div>
                      </div>
                      <div class="visitor-info-right-line">
                        <div class="visitor-info-right-line-name">
                          身份证号：
                        </div>
                        <div class="visitor-info-right-line-value">
                          500111199810154567
                        </div>
                      </div>
                      <div class="visitor-info-right-line">
                        <div class="visitor-info-right-line-name">
                          车牌号码：
                        </div>
                        <div class="visitor-info-right-line-value">
                          渝A·88888
                        </div>
                      </div>
                      <div class="visitor-info-right-line">
                        <div class="visitor-info-right-line-name">
                          访客单位：
                        </div>
                        <div class="visitor-info-right-line-value">
                          XXXXXX公司
                        </div>
                      </div>
                    </div>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              prop="phone"
              label="联系方式"
              align="center"
              width="120"
              show-overflow-tooltip
            >
              <template #default="scope">
                <el-popover
                  popper-class="phone-infos"
                  placement="bottom"
                  trigger="hover"
                  :show-arrow="false"
                >
                  <template #reference>
                    <span class="m-2">{{ scope.row.phone }}</span>
                  </template>
                  <template #default>
                    <div class="phone-info">
                      {{ scope.row.phoneFull }}
                    </div>
                  </template>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              prop="dept"
              label="访问单位"
              align="center"
              width="80"
              show-overflow-tooltip
            />
            <el-table-column
              prop="inTime"
              label="入园时间"
              align="center"
              width="120"
              show-overflow-tooltip
            >
            </el-table-column>
          </el-table>
        </div>
      </card>
      <card
        name="访客人员详情"
        class="visitor-detail"
        v-show="showVisitorDetail"
      >
        <template #title>
          <i class="title-icon"></i>
        </template>

        <template #right>
          <div
            class="right-close"
            @click="
              () => {
                showVisitorDetail = false
                showVisitor = true
              }
            "
          >
            <img src="../../../../assets/imgs/ic_gb.png" />
          </div>
        </template>
        <div class="area-title">
          <div class="area-title-left" style="justify-content: flex-start">
            <div class="area-title-left-names">
              <div class="area-title-left-name">访客信息</div>
            </div>
          </div>
        </div>
        <div class="visitor-info">
          <div class="visitor-info-left">
            <img src="../../../../assets/imgs/img_tx.png" />
          </div>
          <div class="visitor-info-right">
            <div class="visitor-info-right-line title">
              <div class="name">访客姓名：</div>
              <div class="value">张子义</div>
            </div>
            <div class="visitor-info-right-line">
              <div class="visitor-info-right-line-point"></div>
              <div class="visitor-info-right-line-name">联系方式：</div>
              <div class="visitor-info-right-line-value">183 2654 1234</div>
            </div>
            <div class="visitor-info-right-line">
              <div class="visitor-info-right-line-point"></div>
              <div class="visitor-info-right-line-name">身份证号：</div>
              <div class="visitor-info-right-line-value">
                500111199810154567
              </div>
            </div>
            <div class="visitor-info-right-line">
              <div class="visitor-info-right-line-point"></div>
              <div class="visitor-info-right-line-name">车牌号码：</div>
              <div class="visitor-info-right-line-value">渝A·88888</div>
            </div>
            <div class="visitor-info-right-line">
              <div class="visitor-info-right-line-point"></div>
              <div class="visitor-info-right-line-name">访客单位：</div>
              <div class="visitor-info-right-line-value">XXXXXX公司</div>
            </div>
          </div>
        </div>
        <div class="area-title">
          <div class="area-title-left" style="justify-content: flex-start">
            <div class="area-title-left-names">
              <div class="area-title-left-name">访问事由</div>
            </div>
          </div>
        </div>
        <div class="visitor-event">
          <div class="visitor-event-top">XXXXXXXXXXXX公司</div>
          <div class="visitor-event-line">
            <div class="visitor-event-line-left">
              <div class="point"></div>
              <div class="name">访问部门：</div>
              <div class="value">XXXXXX部门</div>
            </div>
            <div class="visitor-event-line-right">
              <div class="point"></div>
              <div class="name">访问人员：</div>
              <div class="value">徐某某</div>
            </div>
          </div>
          <div class="visitor-event-line">
            <div class="visitor-event-line-left">
              <div class="point"></div>
              <div class="name">访问区域：</div>
              <div class="value">行政楼1楼</div>
            </div>
            <div class="visitor-event-line-right">
              <div class="point"></div>
              <div class="name">事由：</div>
              <div class="value">需求沟通</div>
            </div>
          </div>
          <div class="visitor-event-line">
            <div class="point"></div>
            <div class="name">预约时段：</div>
            <div class="value">2024/01/08—2024/01/12</div>
          </div>
        </div>
        <div class="area-title">
          <div class="area-title-left" style="justify-content: flex-start">
            <div class="area-title-left-names">
              <div class="area-title-left-name">随行人员</div>
            </div>
          </div>
        </div>
        <div class="visitor-people">
          <img src="../../../../assets/imgs/ic_z.png" @click="scrollLeft" />
          <el-scrollbar ref="scrollbarRef" @scroll="scroll">
            <div class="scrollbar-flex-content" ref="innerRef">
              <div
                v-for="(item, index) in peopleList"
                :key="index"
                class="scrollbar-demo-item"
                :style="{
                  backgroundImage: item.img
                    ? `url(${item.img})`
                    : `url(${noAva})`,
                }"
              >
                <div class="name">
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </div>
          </el-scrollbar>
          <img src="../../../../assets/imgs/ic_y.png" @click="scrollRight" />
        </div>
      </card>
      <card name="访客量趋势" class="visitor-trend">
        <template #title>
          <i class="title-icon"></i>
        </template>
        <div class="trend-chart">
          <draw-echarts
            width="400"
            height="250"
            :options="trendOptions"
          ></draw-echarts>
        </div>
      </card>
    </div>
    <div v-show="showTrajectory">
      <card name="轨迹详情" class="visitor-trajectory">
        <template #title>
          <i class="title-icon"></i>
        </template>

        <template #right>
          <div class="right-close" @click="trajectoryClose">
            <img src="../../../../assets/imgs/ic_gb.png" />
          </div>
        </template>
        <div class="trajectory-title">
          <div class="trajectory-title-info">
            <div class="trajectory-title-info-left">
              <span>徐某某</span>(183 6297 1313)
            </div>
            <div class="trajectory-title-info-right">XXXXXXXX公司</div>
          </div>
        </div>
        <div class="trajectory-list" v-if="trajectoryList.length">
          <el-scrollbar>
            <div
              class="trajectory-list-item"
              :class="trajectoryActive == index ? 'active' : ''"
              v-for="(item, index) in trajectoryList"
              :key="index"
              @click="trajectoryClick(index)"
            >
              <div class="trajectory-list-item-info">
                <div class="trajectory-list-item-info-left">
                  <span>{{ index + 1 }}</span>
                </div>
                <div class="trajectory-list-item-info-right">
                  <div class="trajectory-list-item-info-address">
                    {{ item.address
                    }}<img
                      v-if="item.isWarn"
                      src="../../../../assets/imgs/ic_bj.png"
                    />
                  </div>
                  <div class="trajectory-list-item-info-time">
                    {{ item.time }}
                  </div>
                </div>
              </div>
              <div class="trajectory-list-item-arrow">
                <img src="../../../../assets/imgs/gj_arrow.png" />
              </div>
            </div>
          </el-scrollbar>
        </div>
        <div class="trajectory-list" v-else>
          <div class="trajectory-list-noData">
            <div class="trajectory-list-noData-img">
              <img src="../../../../assets/imgs/ic_zwgj.png" />
              <div>暂无轨迹</div>
            </div>
          </div>
        </div>
      </card>
    </div>
  </div>
</template>

<style scoped lang="scss">
.right {
  .title-icon {
    display: inline-flex;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 61px;
    position: relative;
    bottom: 20px;
    // margin-top: 10px;
  }

  .right-close {
    height: 100%;
    position: absolute;
    right: 0;

    img {
      height: 16px;
      width: 16px;
      cursor: pointer;
    }
  }

  .area-title {
    display: flex;
    height: 21px;
    position: relative;

    &-left {
      height: 100%;
      width: 50%;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-image: url('@/assets/imgs/tab_yq_d.png');
      margin-left: 10px;
      display: flex;
      justify-content: flex-start;
      padding-left: 20px;

      &-names {
        width: 100px;
        display: flex;
        justify-content: flex-start;
      }

      &-name {
        font-family: Source Han Sans SC;
        font-weight: bold;
        font-size: 16px;
        color: #00a6ff;
        background: linear-gradient(0deg, #8dc4ff 0%, #ffffff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        cursor: pointer;
      }

      .is-active {
        font-weight: bold;
        font-size: 16px;
        color: #ffffff;
        background: linear-gradient(259deg, #fff4c8 0%, #ffc152 98.9990234375%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  .temporary-visitor {
    height: 638px;
    margin-bottom: var(--card-margin-bottom);

    .title-icon {
      width: 182px;
      background-image: url('@/assets/imgs/lsfktj_title.png');
    }

    .visitors {
      display: flex;
      height: 110px;
      align-items: center;
      justify-content: space-around;
      margin-bottom: 6px;

      .visitor {
        width: 134px;
        height: 58px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: flex-end;
        cursor: pointer;

        &-info {
          width: 70%;
          height: 100%;
          font-weight: 400;
          font-size: 12px;
          color: #ffffff;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          &-name {
            line-height: 20px;
            height: 20px;
          }

          &-value {
            line-height: 30px;
            height: 30px;

            span {
              font-family: Source Han Sans SC;
              font-weight: bold;
              font-size: 20px;
              color: #36d5f0;
              margin-right: 4px;
            }
          }
        }
      }
    }

    .in-out {
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 180px;
      background-image: url('@/assets/imgs/bg_cr.png');
      margin-top: 20px;
      margin-bottom: 20px;
      display: flex;
      flex-direction: column;

      &-top {
        margin-top: 20px;
        height: 100px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: Source Han Sans SC;
        font-weight: 400;
        font-size: 13px;
        color: #c4eaff;

        &-left {
          width: 35%;
          height: 50%;
          text-align: right;
          padding-right: 30px;

          &-count {
            margin-top: 4px;
            font-family: Source Han Sans SC;
            font-weight: bold;
            font-size: 24px;
            color: #50fea3;
            background: linear-gradient(
              0deg,
              rgba(3, 0, 0, 0.29) 0%,
              rgba(255, 255, 255, 0.29) 100%
            );
            -webkit-background-clip: text;
            // -webkit-text-fill-color: transparent;
          }
        }

        &-right {
          width: 35%;
          height: 50%;
          text-align: left;
          padding-left: 30px;

          &-count {
            margin-top: 4px;
            font-family: Source Han Sans SC;
            font-weight: bold;
            font-size: 24px;
            color: #fab54f;
            background: linear-gradient(
              0deg,
              rgba(3, 0, 0, 0.29) 0%,
              rgba(255, 255, 255, 0.29) 100%
            );
            -webkit-background-clip: text;
            // -webkit-text-fill-color: transparent;
          }
        }
      }

      .humen {
        background-image: url('@/assets/imgs/img_crry.png');
      }

      .car {
        background-image: url('@/assets/imgs/img_crcl.png');
      }

      &-bottom {
        flex: 1;
        display: flex;
        align-items: center;
        cursor: pointer;

        &-info {
          width: 100%;
          height: 40px;
          display: flex;
          justify-content: space-between;
          padding-left: 20px;
          padding-right: 20px;

          &-left {
            height: 100%;
            display: flex;
            align-items: center;

            img {
              height: 14px;
              width: 100px;
            }

            span {
              font-family: Source Han Sans SC;
              font-weight: 400;
              font-size: 12px;
              color: #c4eaff;
              line-height: 209px;
            }
          }

          &-right {
            height: 100%;
            display: flex;
            align-items: end;

            &-num {
              width: 30px;
              height: 37px;
              background-repeat: no-repeat;
              background-size: 100% 100%;
              background-image: url('@/assets/imgs/img_szd.png');
              font-family: DINPro;
              font-weight: 500;
              font-size: 23px;
              color: #fff3e1;
              text-align: center;
              line-height: 37px;
            }

            span {
              font-family: Source Han Sans SC;
              font-weight: 500;
              font-size: 12px;
              color: #c4eaff;
              margin-left: 4px;
            }
          }
        }
      }
    }
  }

  .reservation-visitor {
    height: 688px;
    margin-bottom: var(--card-margin-bottom);

    .title-icon {
      width: 122px;
      background-image: url('@/assets/imgs/fkjl_title.png');
    }

    &-table {
      height: 100%;
    }
  }

  .retention-visitor {
    height: 688px;
    margin-bottom: var(--card-margin-bottom);

    .title-icon {
      width: 152px;
      background-image: url('@/assets/imgs/zlry_title.png');
    }

    &-table {
      margin-top: 10px;
      margin-bottom: 10px;
      height: 45%;
    }
  }

  .visitor-detail {
    height: 688px;
    margin-bottom: var(--card-margin-bottom);

    .title-icon {
      width: 122px;
      background-image: url('@/assets/imgs/fkxq_title.png');
    }

    .visitor-info {
      height: 150px;
      display: flex;
      margin-top: 12px;
      margin-bottom: 20px;

      &-left {
        width: 120px;

        img {
          height: 100%;
          width: 100%;
        }
      }

      &-right {
        flex: 1;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image: url('@/assets/imgs/bg_fkxx.png');
        padding-left: 20px;

        &-line {
          display: flex;
          align-items: center;
          font-family: Source Han Sans SC;
          font-weight: 400;
          font-size: 14px;
          height: 26px;

          &-point {
            width: 7px;
            height: 7px;
            background: #68f2fe;
            transform: rotate(45deg);
            margin-left: 10px;
          }

          &-name {
            color: #c4eaff;
            margin-left: 10px;
          }

          &-value {
            color: #ffffff;
            flex: 1;
          }
        }

        .title {
          height: 24px;
          background: linear-gradient(90deg, #1a76ff, rgba(30, 133, 221, 0));
          border-radius: 12px;
          font-family: Source Han Sans SC;
          font-weight: bold;
          font-size: 16px;
          color: #ffffff;
          padding-left: 10px;
          margin-top: 10px;
          margin-bottom: 6px;
        }
      }
    }

    .visitor-event {
      height: 180px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-image: url('@/assets/imgs/bg_fwsy.png');
      margin-top: 12px;
      margin-bottom: 20px;
      padding-left: 15px;
      padding-top: 13px;

      &-top {
        width: calc(100% - 28px);
        height: 44px;
        line-height: 44px;
        margin-right: 28px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image: url('@/assets/imgs/img_gs.png');
        font-family: Source Han Sans SC;
        font-weight: bold;
        font-size: 16px;
        color: #68f2fe;
        padding-left: 63px;
      }

      &-line {
        display: flex;
        display: flex;
        align-items: center;
        font-family: Source Han Sans SC;
        font-weight: 400;
        font-size: 14px;
        height: 40px;

        &-left {
          width: 50%;
          height: 100%;
          display: flex;
          align-items: center;
        }

        &-right {
          width: 50%;
          display: flex;
          height: 100%;
          align-items: center;
        }

        .point {
          width: 7px;
          height: 7px;
          background: #68f2fe;
          transform: rotate(45deg);
          margin-left: 10px;
        }

        .name {
          color: #c4eaff;
          margin-left: 10px;
        }

        .value {
          color: #ffffff;
          flex: 1;
        }
      }
    }

    .visitor-people {
      margin-top: 18px;
      display: flex;
      align-items: center;

      img {
        height: 20px;
        width: 20px;
        margin: 10px;
        cursor: pointer;
      }

      .scrollbar-flex-content {
        display: flex;
        flex: 1;
      }

      .scrollbar-demo-item {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100px;
        height: 120px;
        margin: 5px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        position: relative;

        .name {
          width: 100%;
          height: 24px;
          line-height: 24px;
          text-align: center;
          background: rgba($color: #0a1736, $alpha: 0.8);
          font-family: Source Han Sans SC;
          font-weight: 500;
          font-size: 12px;
          color: #ffffff;
          position: absolute;
          bottom: 0;
        }
      }
    }
  }

  .visitor-trend {
    height: 256px;

    .title-icon {
      width: 212px;
      background-image: url('@/assets/imgs/fklbhqx_title.png');
    }
  }

  .visitor-trajectory {
    height: 966px;

    .title-icon {
      width: 122px;
      background-image: url('@/assets/imgs/gjxq_title.png');
    }

    .trajectory-title {
      height: 75px;
      margin-top: 10px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-image: url('@/assets/imgs/gj_label_title.png');
      padding-left: 83px;
      padding-right: 21px;
      margin-bottom: 10px;

      &-info {
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: Source Han Sans SC;
        color: #c4eaff;

        &-left {
          font-size: 14px;
          font-weight: 400;

          span {
            font-weight: bold;
            font-size: 18px;
            color: #ffffff;
            background: linear-gradient(0deg, #8dc4ff 0%, #ffffff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }

        &-right {
          font-weight: 400;
          font-size: 12px;
        }
      }
    }

    .trajectory-list {
      height: calc(100% - 100px);
      // overflow: auto;
      margin-top: 20px;
      padding-left: 20px;

      &-item {
        cursor: pointer;
        margin-bottom: 10px;

        &-info {
          height: 68px;
          display: flex;
          align-items: center;

          &-left {
            width: 48px;
            height: 48px;
            line-height: 48px;
            text-align: center;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-image: url('@/assets/imgs/sjz_d_nor.png');
            font-family: Source Han Sans SC;
            font-weight: bold;
            font-size: 16px;
            color: #ffffff;
          }

          &-right {
            height: 68px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            font-size: 12px;
            color: #c4eaff;
            width: 370px;
            position: relative;
            left: -24px;
            padding-left: 24px;
            line-height: 16px;
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }

          &-address {
            font-family: Source Han Sans SC;
            font-weight: bold;
            font-size: 18px;
            color: #ffffff;
            background: linear-gradient(0deg, #8dc4ff 0%, #ffffff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            // line-height: 30px;
            height: 30px;
            margin-top: 8px;
            display: flex;
            align-items: center;

            img {
              width: 24px;
              height: 24px;
              margin-left: 4px;
            }
          }
        }

        &-arrow {
          padding-left: 10px;

          img {
            height: 28px;
            width: 28px;
          }
        }

        &:last-child {
          .trajectory-list-item-arrow {
            display: none;
          }
        }

        &:hover {
          .trajectory-list-item-info-left {
            background-image: url('@/assets/imgs/sjz_d_sel.png');
          }

          .trajectory-list-item-info-right {
            background-image: url('@/assets/imgs/gj_select.png');
          }
        }

        &.active {
          .trajectory-list-item-info-left {
            background-image: url('@/assets/imgs/sjz_d_sel.png');
          }

          .trajectory-list-item-info-right {
            background-image: url('@/assets/imgs/gj_select.png');
          }
        }
      }

      &-noData {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        &-img {
          img {
            width: 48px;
            height: 48px;
          }

          div {
            margin-top: 10px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            font-size: 14px;
            color: #c4eaff;
          }
        }
      }
    }
  }

  :deep(.el-table) {
    background-color: transparent;
    color: #fff;

    tr {
      background-color: transparent;
    }

    th.el-table__cell {
      background-color: transparent;
      font-family: Source Han Sans SC;
      font-weight: 500;
      font-size: 14px;
      color: #c4eaff;
    }

    tbody tr:hover > td {
      background-color: transparent !important;
    }

    .el-table__cell {
      border-bottom: none;
    }

    .el-table__inner-wrapper::before {
      height: 0px;
    }

    .el-table__header-wrapper {
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-image: url('@/assets/imgs/list_top_visitor.png');
    }

    .el-table__body-wrapper {
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-image: url('@/assets/imgs/list_bottom_visitor.png');
      padding-bottom: 10px;

      .el-table__cell {
        border-bottom: 1px solid rgba($color: #657ca8, $alpha: 0.6);

        .m-2 {
          cursor: pointer;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.phone-infos {
  width: 138px !important;
  height: 58px !important;
  line-height: 58px !important;
  text-align: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-image: url('@/assets/imgs/bubble_box.png') !important;
  color: #fff !important;
  padding: 0px !important;
  background-color: transparent !important;
  border: none !important;
  font-family: Source Han Sans SC;
  font-weight: bold;
  font-size: 14px;
  margin-top: -20px;
  margin-left: 30px;
}

.visitor-infos {
  width: 370px !important;
  height: 175px !important;
  line-height: 58px !important;
  text-align: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-image: url('@/assets/imgs/bubble_box_people.png') !important;
  color: #fff !important;
  padding: 0px !important;
  background-color: transparent !important;
  border: none !important;
  margin-top: -20px;
  margin-left: 150px;
  display: flex;
  justify-content: center;
  align-items: center;

  .visitor-info {
    height: 120px;
    display: flex;
    margin-top: 16px;
    margin-bottom: 20px;
    display: flex;

    &-left {
      width: 96px;

      img {
        height: 100%;
        width: 100%;
      }
    }

    &-right {
      flex: 1;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      // background-image: url('@/assets/imgs/bg_fkxx.png');
      padding-left: 10px;

      &-line {
        display: flex;
        align-items: center;
        font-family: Source Han Sans SC;
        font-weight: 400;
        font-size: 14px;
        height: 26px;
        justify-content: flex-start;

        &-name {
          color: #c4eaff;
          margin-left: 10px;
        }

        &-value {
          color: #ffffff;
          // flex: 1;
          justify-content: flex-start;
        }
      }

      .name {
        font-family: Source Han Sans SC;
        font-weight: bold;
        font-size: 18px;
        color: #ffffff;
      }
    }
  }
}
</style>
